$('#open-btn').click(function () {
    if ($("#btn-modal").css('display') === 'none') {
        $("#btn-modal").fadeIn();
    } else {
        $("#btn-modal").fadeOut();
    }
})
$("body").click(function (e) {
    if (!$(e.target).closest("#btn-modal,#open-btn").length) {
        $("#btn-modal").fadeOut();
    }
})

$('#close').click(function () {
    $("#btn-modal").fadeOut();
});


function getStyle(e, t) {
    return e.currentStyle ? e.currentStyle[t] : getComputedStyle(e, !1)[t]
}

function startMove(i, a, l) {
    clearInterval(i.timer), i.timer = setInterval(function () {
        var e = !0;
        for (var t in a) {
            var n = 0, n = "opacity" == t ? Math.round(100 * parseFloat(getStyle(i, t))) : parseInt(getStyle(i, t)),
                r = 0 < (r = (a[t] - n) / 8) ? Math.ceil(r) : Math.floor(r);
            n != a[t] && (e = !1), "opacity" == t ? (i.style.filter = "alpha(opacity:" + n + r + ")", i.style.opacity = (n + r) / 100) : i.style[t] = n + r + "px"
        }
        e && (clearInterval(i.timer), l && l())
    }, 30)
}
var imgArr = [
    'https://scenicprod.1lantech.com/DN9SyTEEQ9TPfEH.jpg',
    'http://cdn.zhizhaowang.cn/swX9n6CaeQ08qYZ.jpg',
    'https://scenicprod.1lantech.com/LE14dOo0u3JOmGz.jpg',

];
var wrap = $('.wrap');
for (var i = 0,len = imgArr.length; i < len; i++) {
    wrap.append(`<div class="img clearfix">
                        <img src="${imgArr[i]}" alt="${i + 1}">
                    </div>`);
}
wrap.append(`<div class="img clearfix">
                        <img src="${imgArr[0]}" alt="1">
                    </div>`);
wrap.prepend(`<div class="img clearfix">
                        <img src="${imgArr[imgArr.length - 1]}" alt="${imgArr.length}">
                    </div>`);
wrap = document.getElementsByClassName("wrap")[0];
var left = document.getElementsByClassName("jt_left")[0], right = document.getElementsByClassName("jt_right")[0],
    container = document.getElementsByClassName("container")[0],
    screenWidth = document.body.clientWidth,
    wrapChildrenLen = $(".wrap").find("img").length, innerImgArr = $(".img");
innerImgArr.each(function (e, t) {
    t.style.width = screenWidth + "px", t.style.maxWidth = screenWidth + "px"
}), setTimeout(function () {
    wrap.style.width = (wrapChildrenLen + 2) * screenWidth + "px", wrap.style.left = -screenWidth + "px",
    container.style.width = screenWidth + "px", container.style.maxWidth = screenWidth + "px"
}, 0);
var newLeft = -screenWidth;

function next() {
    newLeft == -(wrapChildrenLen - 2) * screenWidth && (newLeft = 0, wrap.style.left = newLeft + "px"), startMove(wrap, {"left": newLeft -= screenWidth})
}

function prev() {
    0 == newLeft && (newLeft = -(wrapChildrenLen - 2) * screenWidth, wrap.style.left = newLeft + "px"), startMove(wrap, {"left": newLeft += screenWidth})
}

left.addEventListener("click", function () {
    prev()
}), right.addEventListener("click", function () {
    next()
});
